<template>
  <div  class="p16 flex-column-null-between container" style="width: 98%;">
    <div style="height: 50px">
      <div class="search-item">
        <el-input
            size="small"
            v-model="queryParams.loginAccount"
            class="input-width clear-input"
            suffix-icon="el-icon-search"
            clearable
            placeholder="请输入登录名"
        ></el-input>
      </div>

      <div class="search-item">
        <el-date-picker
            v-model="searchTime"
            type="daterange"
            size="small"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </div>


      <div class="search-item" style="margin-top: 5px;">
        <el-switch
            size="small"
            style="display: block"
            v-model="searchFlag"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="登录成功"
            inactive-text="登录失败">
        </el-switch>
      </div>
      <div class="search-item">
        <el-button type="primary" size="small"  @click="queryLoginLogList">搜索</el-button>
      </div>
    </div>

    <div  style="height: calc(100vh - 180px)">
      <el-table
          :data="tableData"
          size="small"
          :row-style="{height:'0'}"
          height="calc(100vh - 220px)"
          v-loading="loading">
        <el-table-column
            v-for="(item,index) in fields"
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :min-width="item.width"
            :fixed="item.fixed"
        >
          <template v-if="item.prop === 'flag'" scope="scope">
<!--             <span>{{scope.row.flag ? '是' : '否'}}</span>-->

            <span v-if="!scope.row.flag" style="color: red">否</span>
            <span v-if="scope.row.flag" style="color: #13ce66">是</span>
          </template>
        </el-table-column>

      </el-table>
      <div class="page-container">
        <el-pagination
            :page-sizes="[10, 20, 30, 50]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="nowPage"
            :page-size="10"
            layout="sizes,total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>


  </div>
</template>

<script>
import {findLoginLog} from '@/api/syslog';
import {formatDate,formatDateEnd} from "@/utils/DateUtils";
export default {
  data() {
    return {
      total: 0,
      loading: false,
      nowPage:1,
      searchTime:'',
      searchFlag:true,
      queryParams:{
        pageNum:1,
        pageSize:10,
        loginAccount:"",
        startTime:null,
        endTime:null,
        flag:"1"
      },
      fields:[
        {
          label:"登录人",
          prop:"params",
          width:150
        },{
          label:"登录地址",
          prop:"ip",
          width:150
        },{
          label:"登录时间",
          prop:"createTime",
          width:120
        },{
          label:"是否成功",
          prop:"flag",
          width:200
        }
      ],
      tableData: []
    }
  },
  created() {
    this.queryLoginLogList();
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    async queryLoginLogList(){
      let time = this.searchTime;
      if(time){
        this.queryParams.startTime = formatDate(time[0]);
        this.queryParams.endTime = formatDateEnd(time[1]);
      }else{
        this.queryParams.startTime = null;
        this.queryParams.endTime = null;
      }
      if(this.searchFlag){
        this.queryParams.flag = '1';
      }else{
        this.queryParams.flag = '0';
      }
      this.loading = true;
      let ret = await findLoginLog(this.queryParams);
      let content = ret.data;
      this.total = content.total;
      this.tableData = content.list;
      this.loading = false;
    },
    handleSizeChange(val) {
      this.queryParams.limit = val;
      this.queryLoginLogList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.queryLoginLogList();
    }

  },

}
</script>


<style src="../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>
.search-item{
  float: left;
  margin: 0 20px 20px 0;
  span{
    color: #606266;
    font-size: 14px;
    margin-right: 0px;
  }
}

</style>
